<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<%@taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<!DOCTYPE html>
<html>
<head>
<title>sunny-mvc</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<jsp:include page="../../common.jsp"></jsp:include>
<style>
.header {
	height: 39px;
	width: 100%;
	background-color: #B1D7EF;
	font-size: 12px;
	position: fixed;
}

.nav {
	float: right;
}

.nav-container {
	margin: 0px auto;
	width: 1200px;
	/*text-align: center;*/
}

.dropdown-toggle {
	z-index: 99;
}

input {
	z-index: 0;
}

.body-container {
	padding-top: 39px;
	margin: 0 auto;
	width: 1400px;
	height: 500px;
	padding-right: 200px;
	padding-left: 200px;
	/*background-color: #ff6600;*/
}

.body-container2 {
	border-top-left-radius: 30px;
	background-color: #EBF3F8;
	padding: 30px 20px 20px 20px;
}

.body-container3 {
	margin: 0 auto;
}

td {
	width: 310px;
	font-size: 12px;
}

.td-status {
	width: 40px;
}

#tab {
	z-index: 0;
	-webkit-border-radius: 5px;
	-webkit-box-shadow: -5px -5px 5px #999 inset;
	box-shadow: -5px -5px 5px #999 inset;
	border-radius: 3px;
}

.tab_header tr th {
	height: 30px;
	font-size: 14px;
	font-weight: blod;
	font-family: '微软雅黑';
	text-align: center;
}

.tab_header td {
	padding-left: 2px;
}

.td-status {
    text-align: center;
}

.inp-date {
    font-size: 12px;
    width: 100px;
    height: 25px;
}

.grid_table {
    margin-top:20px;
    margin-bottom: 30px;
}

#date-div {
    padding-top: 15px;
    border-top: 1px solid #C0C0C0;
}
</style>

<script>
        $(document).ready(function () {
            $(".nav-pills li").mouseover(function () {
                $(".nav-pills li").className("active");
            })

            var tab = new table_grid("#tab", "#C0C0C0", "#C0C0C0", "#FFFFFF", "#B1D7EF", "#FFFFCC");
            tab.init();
            tab.setMouseOverColor();
            
            $("input[type='checkbox']").change(function(){
            	var $o = $(this).parent().next().children("input[type='number']");
            	
            	if($(this)[0].checked == true) {
            	    $o.attr("disabled", false);   	
            	}else {
            	    $o.attr("disabled", true);	
            	}

            })
                
        })
        
        function enableInput(index){
        	
        }
    </script>
</head>
<body>
	<div class="header">
		<div class="nav-container">
			<ul class="nav nav-pills">
				<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#"> 项目 <span class="caret"></span>
				</a>
					<ul class="dropdown-menu">
						<li><a href="#">Swing</a></li>
						<li class="divider"></li>
						<li><a href="#">分离的链接</a></li>
					</ul></li>
				<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#"> 报表 <span class="caret"></span>
				</a>
					<ul class="dropdown-menu">
						<li><a href="#">Swing</a></li>
						<li class="divider"></li>
						<li><a href="#">分离的链接</a></li>
					</ul></li>
				<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#"> 管理 <span class="caret"></span>
				</a>
					<ul class="dropdown-menu">
						<li><a href="#">Swing</a></li>
						<li class="divider"></li>
						<li><a href="#">分离的链接</a></li>
					</ul></li>
				<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#"> 工具 <span class="caret"></span>
				</a>
					<ul class="dropdown-menu">
						<li><a href="#">Swing</a></li>
						<li class="divider"></li>
						<li><a href="#">分离的链接</a></li>
					</ul>
				<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#"> 系统<span class="caret"></span>
				</a>
					<ul class="dropdown-menu">
						<li><a href="#">退出</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</div>
	<div class="body-container">
		<div class="body-container2">
			<div class="body-container3">
				<div style="display:inline">
					<h3><span style="font-family:'微软雅黑';font-size:26px">工时填报</span></h3>
				</div>
				<div id="date-div">
	               <strong><span style="font-family:微软雅黑;color:red">填报日期:&nbsp</span></strong><input type="date" class="inp-date" id="inp-date">
				</div>
				<table class="grid_table" id="tab">
					<thead class="tab_header">
						<tr>
							<th>项目代码</th>
							<th>项目名称</th>
							<th class="td-status">状态</th>
							<th>工作时间</th>
						<tr>
					</thead>
					<tbody>
						<c:forEach var="p" items="${projects}">
							<tr>
								<td><c:out value="${p.projectid}" /></td>
								<td><c:out value="${p.projectName}" /></td>
								<td class="td-status"><input type="checkbox"></td>
								<td><input class="form-control" type="number" placeholder="工作时间" disabled="true"></td>
							</tr>
						</c:forEach>
						<tr>
							<td colspan="3">总和</td>
							<td></td>
						</tr>
					</tfoot>
				</table>
				<button type="button" class="btn btn-info">提交</button>
			</div>
		</div>
	</div>

</body>
</html>